<script setup lang="ts">
defineProps<{
  message: {
    id: number
    text: string
    sender: string
    timestamp: string
  }
}>()
</script>

<template>
  <div :class="['message', message.sender === 'self' ? 'message-self' : 'message-other']">
    <div class="message-content">
      <p>{{ message.text }}</p>
      <span class="timestamp">{{ message.timestamp }}</span>
    </div>
  </div>
</template>

<style scoped>
.message {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 8px;
  word-break: break-word;
  margin-bottom: 8px;
}

.message-self {
  align-self: flex-end;
  background-color: #dcf8c6;
}

.message-other {
  align-self: flex-start;
  background-color: #f1f0f0;
}

.message-content p {
  margin: 0 0 5px 0;
}

.timestamp {
  font-size: 11px;
  color: #888;
  display: block;
  text-align: right;
}
</style>
